<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<!--App自定义的css-->
		<!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
		
	</head>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div.top{
            background: #22A9FB;
            width: 100%;
            height: 300px;
            color: white;
            padding: 20px;
            box-sizing: border-box;
        }

        div.top>h1{
            font-size: 18px;
            font-weight: 300; 
        }

        div.top>h3{
            font-size: 16px;
            font-weight: 500; 
            margin-top: 50px;
            line-height: 30px;
        }

        div.top>h1>span{
            font-size: 28px;
        }

        div.con{
            width: 80%;
            height: 500px;
            background: white;
            margin: 0 auto;
            position: relative;
            bottom: 50px;
            box-shadow: 0 0 30px 3px rgb(190, 190, 182);
            padding: 20px;
            box-sizing: border-box;
        }

        div.con button{
            margin-top: 50px;
            background: #22A9FB;
            color: white;
            width: 150px;
            height: 40px;
            border-radius: 30px;
        }

        div.con a{
            display: inline-block;
            margin-top: 50px;
            line-height: 40px;
            margin-left: 30px;
        }

        
    </style>
	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">评估问卷</h1>
		</header>
		<div class="mui-content">
			<div class="mui-card">
				<div class="top">
                    <h1><span>1</span>/10 [单选]</h1>

                    <h3>请问您属于下列哪个阶段的人？（方便对您的体检）进行评估</h3>
                </div>

                <div class="con">
                    <div class="silder">
                        <div class="mui-input-row mui-radio mui-left">
                            <label>未婚男士</label>
                            <input name="radio1" type="radio">
                        </div>
                    </div>

                    <div class="silder">
                        <div class="mui-input-row mui-radio mui-left">
                            <label>未婚男士</label>
                            <input name="radio1" type="radio">
                        </div>
                    </div>

                    <div class="silder">
                        <div class="mui-input-row mui-radio mui-left">
                            <label>未婚男士</label>
                            <input name="radio1" type="radio">
                        </div>
                    </div>

                    <div class="silder">
                        <div class="mui-input-row mui-radio mui-left">
                            <label>未婚男士</label>
                            <input name="radio1" type="radio">
                        </div>
                    </div>
                    

                    <div class="silder">
                        <button>下一题</button>
                        <a href="#">取消</a>
                    </div>
                    
                </div>
						
						
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script>
			mui.init({
				swipeBack:true //启用右滑关闭功能
			});
		</script>
	</body>

</html>